<template>
  <div class="out">
    <!-- 查询模块 -->
    <div id="carsSelect">
      <h2>车辆查询</h2>
      <select v-model="selectType">
        <option value="" disabled selected hidden>请选择查询条件</option>
        <option value="carsName">车型名称</option>
        <option value="carsType">车型分类</option>
        <option value="perNum">容纳人数</option>
        <option value="fuel">能源类型</option>
      </select>
      <input
        type="text"
        v-model="selectKey"
        v-show="selectType == 'carsName'"
      />
      <select v-model="selectKey" v-show="selectType == 'carsType'">
        <option value="" disabled selected hidden>请选择车型</option>
        <option value="小型车">小型车</option>
        <option value="中型车">中型车</option>
        <option value="大型车">大型车</option>
      </select>

      <input
        type="number"
        max="50"
        min="1"
        value="请输入乘坐人数"
        v-model.number="selectKey"
        v-show="selectType == 'perNum'"
      />
      <select v-model="selectKey" v-show="selectType == 'fuel'">
        <option value="" disabled selected hidden>请选择能源类型</option>
        <option value="汽油">汽油</option>
        <option value="柴油">柴油</option>
      </select>
      <button
          @click="carsSelect(selectType, selectKey)"
          v-show="selectType !== ''"
      >
        查询
      </button>
      <button
        @click="reset()"
        v-show="selectType !== ''"
    >
      重置
    </button>
    </div>

    <!-- 添加模块 -->
    <div id="carsAdd">
      <h2>车辆添加</h2>
      <form action="">
        <span>车型名称：</span
        ><input type="text" value="" v-model.lazy="ruleForm.carName" />
        <span>车型分类：</span
        ><select v-model.lazy="ruleForm.carType">
          <option value="" disabled selected hidden>请选择车型</option>
          <option value="小型车">小型车</option>
          <option value="中型车">中型车</option>
          <option value="大型车">大型车</option>
        </select>

        <span>乘坐人数：</span
        ><input
          type="number"
          max="50"
          min="1"
          value="请输入乘坐人数"
          v-model.number="ruleForm.accommodation"
        />
        <span>能源类型：</span>
        <select v-model="ruleForm.fuel">
          <option value="" disabled selected hidden>请选择能源类型</option>
          <option value="汽油">汽油</option>
          <option value="柴油">柴油</option>
        </select>

        <span>油耗(L/百公里)：</span
        ><input
          type="number"
          max="80"
          min="0"
          :step="0.01"
          value="请输入油耗"
          v-model.number="ruleForm.fuelConsumption"
        />

        <button
          @click.prevent="addCars(ruleForm)"
          @keyup.enter="addCars(ruleForm)"
        >
          立即添加
        </button>


      </form>
    </div>


    <!-- 列表 -->
    <div id="carsItems">
      <h2>车辆列表</h2>
      <table>
        <thead>
          <tr>
            <td></td>
            <td>序号</td>
            <td>车型名称</td>
            <td>车型分类</td>
            <td>容纳人数</td>
            <td>能源类型</td>
            <td>油耗(L/百公里)</td>
            <td>编辑</td>
          </tr>
        </thead>
        <tbody>
<!--          <tr v-for="carsItem in carsItems" :key="carsItem.id" v-if="filcarsItems.length">-->
          <tr v-for="carsItem in carsItems" :key="carsItem.id">
            <td>
              <input type="checkbox" v-model="carsItem.check" />
            </td>
            <td>{{ carsItem.id }}</td>
            <!-- 车辆名称 -->
            <td v-show="!carsItem.isEdit">{{ carsItem.carName }}</td>
            <input
              v-show="carsItem.isEdit"
              type="text"
              v-model="carsItem.carName"
            />

            <!-- 车辆类型 -->
            <td v-show="!carsItem.isEdit">{{ carsItem.carType }}</td>
            <select :v-model="carsItem.carType" v-show="carsItem.isEdit">
              <option value="小型车">小型车</option>
              <option value="中型车">中型车</option>
              <option value="大型车">大型车</option>
            </select>

            <!-- 容纳人数 -->
            <td v-show="!carsItem.isEdit">{{ carsItem.accommodation }}</td>
            <input
              type="number"
              max="50"
              min="1"
              v-model="carsItem.accommodation"
              v-show="carsItem.isEdit"
            />

            <!-- 燃油类型 -->
            <td v-show="!carsItem.isEdit">{{ carsItem.fuel }}</td>
            <select v-model="carsItem.fuel" v-show="carsItem.isEdit">
              <option value="汽油">汽油</option>
              <option value="柴油">柴油</option>
            </select>

            <!-- 油耗 -->
            <td v-show="!carsItem.isEdit">{{ carsItem.fuelConsumption }}</td>
            <td>
              <input
                type="number"
                max="80"
                min="0"
                :step="0.01"
                v-model="carsItem.fuelConsumption"
                v-show="carsItem.isEdit"
              />

              <!-- 编辑/删除按钮 -->
              <button @click="saveEdit(carsItem)" v-show="carsItem.isEdit">
                保存修改
              </button>
              <button @click="editCarsItem(carsItem)">编辑</button>
              <button @click="delCarsItem(carsItem.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 批量操作 -->
    <div id="batchOperation" v-show="total">
      <label>
        <input type="checkbox" :checked="isAll" @change="checkedAll" />
      </label>
      <span>
        <span>已选中{{ checkedTotal }}</span> / 全部{{ total }}
      </span>
      <button @click="clearCars">清除已选中车辆</button>
    </div>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
  name: "CarsList",
  data() {
    return {
      selectType: "",
      selectKey: "",
      filcarsItems:[],
      ruleForm: {
        check: false,
        isEdit: false,
        id: "",
        carName: "",
        carType: "",
        accommodation: 1,
        fuelConsumption: 1,
        fuel: "",
      },
      allData:null,
      carsItems: [
        {
          check: false,
          isEdit: false,
          id: "001",
          carName: "比亚迪-汉",
          carType: "中大型车",
          accommodation: 5,
          fuel: "纯电",
          fuelConsumption: 0.0,
        },
        {
          check: false,
          isEdit: false,
          id: "002",
          carName: "比亚迪-唐",
          carType: "中型车",
          accommodation: 4,
          fuel: "汽油",
          fuelConsumption: 1.0,
        },
        {
          check: false,
          isEdit: false,
          id: "003",
          carName: "唐玄宗",
          carType: "大型车",
          accommodation: 3,
          fuel: "柴油",
          fuelConsumption: 2.0,
        },
        {
          check: false,
          isEdit: false,
          id: "004",
          carName: "汉麒麟宗",
          carType: "小型车",
          accommodation: 2,
          fuel: "汽油柴油",
          fuelConsumption: 3.0,
        },
      ],
    };
  },
  watch: {
    selectKey: {
      // immediate: true, //在框的值还没变化时执行如下函数显示出所有的情况
      // handler(a, b) {
      //   // console.log();
      //
      // },
    },
  },
  methods: {
    // 查询模块
    carsSelect(selectType, selectKey) {
      if (selectType == "carsName") {
        // 如果查询条件是carsName，判断selectKey是否为空
        if (!selectKey.trim()) {
          alert("请输入车辆名称！");
        }
        // carsName不为空，进行查询
        else {
          this.carsItems=this.allData;
          // this.filcarsItems = this.carsItems.filter((item) => {
          this.carsItems = this.carsItems.filter((item) => {
            return item.carName.indexOf(selectKey) !== -1;
          });
          // console.log(selectType, selectKey);
        }
      }
      // 判断查询条件是不是carsType
      else if (selectType == "carsType") {
        if (!selectKey.trim()) {
          alert("请选择车辆类型！");
        }
        // carsType不为空，进行查询
        else {
          this.carsItems=this.allData;
          // this.filcarsItems = this.carsItems.filter((item) => {
          this.carsItems = this.carsItems.filter((item) => {
            return item.carType.indexOf(selectKey) !== -1;
          });
        // console.log(selectType, selectKey);
      }
      }
      // 判断查询条件是不是perNum
      else if (selectType == "perNum") {
        if (selectKey == "") {
          alert("请输入容纳人数！");
        }
        // perNum不为空，进行查询
        else {
          this.carsItems=this.allData;
          // console.log(typeof(selectKey))
          this.carsItems = this.carsItems.filter((item) => {
            return item.accommodation==selectKey;
          });


        }
        // console.log(selectType, selectKey);
      }
      // 判断查询条件是不是fuel
      else if (selectType == "fuel") {
        if (!selectKey.trim()) {
          alert("请选择能源类型！");
        }
        // fuel不为空，进行查询
        else {
          this.carsItems=this.allData;
          // this.filcarsItems = this.carsItems.filter((item) => {
          this.carsItems = this.carsItems.filter((item) => {
            return item.fuel.indexOf(selectKey) !== -1;
          });
          // console.log("111");
        }
        // console.log(selectType, selectKey);
      }
      //   this.carsItems.forEach((carsItem) => {
      //   selectType;
      // });
      //   this.carsItems = this.carsItems.filter((caritem) => caritem.id !== id);
    },
    //重置按钮
    reset(){
      this.selectType='',
          this.selectKey='',
      this.carsItems=this.allData;
    },
    //添加功能模块
    addCars(ruleForm) {
      const itemObj = {
        id: nanoid(),
        isEdit: false,
        carName: this.ruleForm.carName,
        carType: this.ruleForm.carType,
        accommodation: this.ruleForm.accommodation,
        fuel: this.ruleForm.fuel,
        fuelConsumption: this.ruleForm.fuelConsumption,
      };

      if (!itemObj.carName.trim()) return alert("车型名称不能为空！");
      else if (!itemObj.carType.trim()) return alert("车型分类不能为空！");
      else if (!itemObj.accommodation) return alert("容纳人数不能为空！");
      else if (!itemObj.fuel.trim()) return alert("能源类型不能为空！");
      else if (!itemObj.fuelConsumption) return alert("油耗不能为空！");
      else {
        this.carsItems.unshift(itemObj);
        this.ruleForm.carName = "";
        this.ruleForm.carType = "";
        this.ruleForm.accommodation = 1;
        this.ruleForm.fuel = "";
        this.ruleForm.fuelConsumption = 1.0;
      }
    },
    // 编辑按钮
    editCarsItem(carsItem) {
      carsItem.isEdit = true;
    },
    // 保存修改
    saveEdit(carsItem) {
      if (!carsItem.carName.trim()) return alert("车型名称不能为空！");
      else if (!carsItem.carType.trim()) return alert("车型分类不能为空！");
      else if (!carsItem.accommodation) return alert("容纳人数不能为空！");
      else if (!carsItem.fuel.trim()) return alert("能源类型不能为空！");
      else if (!carsItem.fuelConsumption) return alert("油耗不能为空！");
      else {
        carsItem.isEdit = false;
      }
    },
    //删除按钮模块
    delCarsItem(id) {
      console.log(id);
      if (confirm("是否确定删除？")) {
        this.carsItems = this.carsItems.filter((caritem) => caritem.id !== id);
      }
    },
    //全选框
    checkedAll(e) {
      this.carsItems.forEach((carsItem) => {
        carsItem.check = e.target.checked;
      });

      // console.log(e.target.checked);
    },

    //清除已选中车辆
    clearCars() {
      if (confirm("是否确定删除？")) {
        this.carsItems = this.carsItems.filter((carsItem) => {
          return !carsItem.check;
        });
      }
    },
  },
  created() {
    this.allData=this.carsItems;
  },
  computed: {
    total() {
      return this.carsItems.length;
    },
    checkedTotal() {
      return this.carsItems.reduce(
        (pre, current) => pre + (current.check ? 1 : 0),
        0
      );
    },

    isAll() {
      return (
        this.checkedTotal === this.carsItems.length && this.carsItems.length > 0
      );
    },
  },
};
</script>

<style scoped>
.out {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 auto;
  width: 80%;
}

/* 查询模块 */
#carsSelect,
#carsAdd {
  height: 80px;
}
#carsSelect select {
  width: 120px;
  height: 30px;
  border: 1px solid rgb(134, 133, 133);
  color: rgb(129, 129, 129);
  border-radius: 10px;
}
#carsSelect input {
  border: 1px solid rgb(217, 214, 214);
  /*color: rgb(217, 214, 214);*/
  /*background-color: rgb(196, 196, 196);*/
}
/* 添加模块 */

/* 列表模块 */
#carsItems {
  width: 100%;
}
#carsItems table {
  width: 100%;
  text-align: center;
  border: 1px solid rgb(159, 159, 159);
}

#carsItems table thead {
  height: 30px;
  font-size: 15px;
  font-weight: bolder;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  color: rgb(255, 255, 255);
  background-color: rgb(107, 107, 107);
}
#carsItems table tr:nth-child(0) {
  width: 40px;
}

#carsItems table thead tr:nth-child(n + 1) {
  width: 14%;
}

#carsItems table tbody tr {
  height: 40px;
  font-size: 15px;
}

/* 批量操作 */
#batchOperation {
  margin-top: 10px;
  font-size: 16px;
  /* margin-left: 17px; */
}
#batchOperation input {
  width: 47px;
  margin-right: 10px;
}

#batchOperation input {
  width: 47px;
  margin-right: 10px;
}

#batchOperation button {
  /* width: 80px; */
  margin-left: 10px;
}
</style>